<template>
	<view style="height: 100vh;">
		<view class="nav">
			<view class="flex_between" style="padding-left: 30%;">
				<view class="nav_title">
					<view :class="{'active':isActive==1}" @click="chenked(1)">
						待审批
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==2}" @click="chenked(2)">
						已审批
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索框 -->
		<view style="height: 40px;background-color: white;margin-top: 10px;width: 100%;padding-top: 8px;">
			<input type="text" placeholder="请输入搜索关键词" placeholder-style="text-align:center;font-size:10px;color:#999;"
				style="border-radius: 10px;width: 80%;background-color: #eee;margin: auto;height: 30px;text-align: center;"
				v-model="searchKey" confirm-type="search" @change="changeSearch"></input>
		</view>
		<!-- 待审批 -->
		<view v-if="isActive==1">
			<view class="unvisit_block" v-for="(item,index) in unApprovalList" :key="index" @click="fnChecked(item)">
				<view class="unvisit_line">
					<view>访客姓名:</view>
					<view class="unvisit_line_value" v-if="item.visitName!=null">{{item.visitName}}</view>
				</view>
				<view class="unvisit_line">
					<view>手机号码:</view>
					<view class="unvisit_line_value" v-if="item.visitPhone!=null">{{item.visitPhone}}</view>
				</view>
				<view class="unvisit_line">
					<view>身份证号:</view>
					<view class="unvisit_line_value" v-if="item.visitCard!=null">{{item.visitCard}}</view>
				</view>
				<view class="unvisit_line">
					<view>受访对象:</view>
					<view class="unvisit_line_value" v-if="item.visitComp!=null">{{item.visitComp}}</view>
				</view>
				<view class="unvisit_line">
					<view>受访时间:</view>
					<view class="unvisit_line_value" v-if="item.visitTime!=null">{{item.visitTime}}</view>
				</view>
			</view>
		</view>
		<!-- 已审批 -->
		<view v-if="isActive==2">
			<view class="visit_block" v-for="(item,index) in approvalList" :key="index">
				<view class="visit_line">
					<view>访客姓名:</view>
					<view class="visit_line_value" v-if="item.visitName!=null">{{item.visitName}}</view>
				</view>
				<view class="visit_line">
					<view>手机号码:</view>
					<view class="visit_line_value" v-if="item.visitPhone!=null">{{item.visitPhone}}</view>
				</view>
				<view class="visit_line">
					<view>身份证号:</view>
					<view class="visit_line_value" v-if="item.visitCard!=null">{{item.visitCard}}</view>
				</view>
				<view class="visit_line">
					<view>受访对象:</view>
					<view class="visit_line_value" v-if="item.visitComp!=null">{{item.visitComp}}</view>
				</view>
				<view class="visit_line">
					<view>受访时间:</view>
					<view class="visit_line_value" v-if="item.visitTime!=null">{{item.visitTime}}</view>
				</view>
				<view class="visit_line">
					<view>审批时间:</view>
					<view class="visit_line_value" v-if="item.approverTime!=null">{{item.approverTime}}</view>
				</view>
				<view class="visit_line">
					<view>审批人:</view>
					<view class="visit_line_value" v-if="item.user.approverName!=null">{{item.user.approverName}}</view>
				</view>
				<view class="visit_line">
					<view>审批状态:</view>
					<view class="visit_line_value">
					<text class="unchecked" v-if="item.approverState=='0'">待审核</text>
					<text class="success" v-else-if="item.approverState=='1'">通过</text>
					<text class="unpass" v-else-if="item.approverState=='2'">拒绝</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 审批弹出框 -->
		<uni-popup class="finish-popup" ref="popup" type="bottom">
			<view style="padding: 20px;background-color: white;">
				<button @click="passApproval">通过审批</button>
				<button style="margin-bottom: 0px;background-color: #fb8d8d;" @click="unPassApproval">拒绝审批</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		listVisitorRecord,
		changeVisitorRecordApproverState
	} from '@/common/js/api/visitRecord.js';
	export default {
		data() {
			return {
				isActive: 1,
				//当前点击对象
				currentData: {},
				//已审批列表
				approvalList: [
				],
				//待审批列表
				unApprovalList: [
				],
			}
		},
		onLoad() {
			this.getVisitRecord()
		},
		methods: {
			chenked(type) {
				this.isActive = type
			},
			fnChecked(data) {
				this.currentData = data
				this.$nextTick(function() {
					this.$refs.popup.open()
				})

			},
			//获取访客预约列表
			getVisitRecord(searchKey) {
				this.approvalList = []
				this.unApprovalList = []
				let param = {
					'visitComp': searchKey,
				}
				listVisitorRecord(param).then(res => {
					let totalList = res.rows
					for (let i in totalList) {
						if (totalList[i].approverState === '0') {
							this.unApprovalList.push(totalList[i])
						} else {
							this.approvalList.push(totalList[i])
						}
					}
				})
			},
			happenTimeFun(num) { //时间戳数据处理
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			//通过审核
			passApproval() {
				let that = this
				let date = this.happenTimeFun(new Date())
				console.log(this.currentData);
				this.currentData.approverTime = date
				this.currentData.approverState = '1'
				uni.showModal({
					title: '提示',
					content: '确认通过该请求',
					success: function(res) {
						if (res.confirm) {
							changeVisitorRecordApproverState(that.currentData).then(res => {
								that.isActive = 2
								that.$refs.popup.close()
								that.getVisitRecord()
							})
						} else if (res.cancel) {}
					}
				})

			},
			//拒绝审核
			unPassApproval() {
				let that = this
				let date = this.happenTimeFun(new Date())
				this.currentData.approverTime = date
				this.currentData.approverState = '2'
				uni.showModal({
					title: '提示',
					content: '确认拒绝该请求',
					success: function(res) {
						if (res.confirm) {
							changeVisitorRecordApproverState(that.currentData).then(res => {
								that.isActive = 2
								that.$refs.popup.close()
								that.getVisitRecord()
							})
						} else if (res.cancel) {}
					}
				})
			},
			//关键字搜索
			changeSearch() {
				this.getVisitRecord(this.searchKey)
			}
		}
	}
</script>

<style lang="scss" scoped>
	//button样式
	button {
		width: 95%;
		background-color: #1884eb;
		margin: auto;
		color: white;
		margin-bottom: 20px;
	}

	.visit_block,
	.unvisit_block {
		height: 125px;
		margin-top: 10px;
		margin-bottom: 10px;
		background: white;
		padding: 20px;

		.visit_line,
		.unvisit_line {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #999;
			line-height: 25px;
		}

		.unvisit_line_value,
		.visit_line_value {
			color: black;
		}
	}

	.visit_block {
		height: 180px;
	}



	.nav {
		background: white;

		.flex_between {
			display: flex;

			.nav_title {
				width: 150upx;
				margin-top: 10px;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: "PingFang";
				font-weight: bold;
				color: #999;
			}
		}
	}

	.nav_item {
		margin: auto;
		width: 94%;
		border-bottom: 1px solid #eeeeee;
		background: white;
		padding-bottom: 10px;
		margin-top: 20px;
	}

	.active {
		position: relative;
		color: #1884eb;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 40rpx;
		border-radius: 10upx;
		height: 8rpx;
		background-color: #0a73d5;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	
	.unchecked {
		color: #1884eb;
	}
	
	.success {
		color: #00d8a0;
	}
	
	.unpass {
		color: red;
	}
</style>
